<template>
  <div>
    <!-- 点击图标显示抽屉 -->
    <SkinOutlined
      @click="showDrawer"
      style="cursor: pointer"
      class="fullscreen-btn"
    />

    <!-- 抽屉组件 -->
    <Drawer
      title="布局设置"
      placement="right"
      :visible="drawerVisible"
      @close="drawerVisible = false"
    >
      <p>这里是主题设置面板</p>
    </Drawer>
    <a-tooltip>
      <FullscreenExitOutlined
        @click="handleFullScreen"
        class="fullscreen-btn"
        v-if="isFullscreen"
      />
      <FullscreenOutlined
        @click="handleFullScreen"
        class="fullscreen-btn"
        v-if="!isFullscreen"
      />
    </a-tooltip>
    <span style="font-size: 18px; margin: 0 10px">{{ username }}</span>
    <!-- <BarsOutlined class="outlogin" /> -->
    <a-dropdown :trigger="['click']" placement="bottomRight">
      <BarsOutlined class="outlogin" style="font-size: 22px; cursor: pointer" />
      <template #overlay>
        <a-menu>
          <a-menu-item key="1">
            <UserOutlined />
            个人中心
          </a-menu-item>
          <a-menu-item key="2">
            <SettingOutlined />
            设置
          </a-menu-item>
          <a-menu-divider />
          <a-menu-item key="3" danger @click="outlogin">
            <LogoutOutlined />
            退出登录
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script setup lang="ts">
import {
  BarsOutlined,
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  SkinOutlined,
} from '@ant-design/icons-vue';
import { reqUserInfo } from '@/api/user/index';
import { onMounted, ref, onUnmounted } from 'vue';
import {
  FullscreenExitOutlined,
  FullscreenOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import screenfull from 'screenfull';
import { useRouter } from 'vue-router';
import Drawer from '@/layouts/components/ThemeDrawer';
const router = useRouter();
const isFullscreen = ref(false);

// 监听全屏变化
const changeHandler = () => {
  isFullscreen.value = screenfull.isFullscreen;
};

onMounted(() => {
  getdata();
  if (screenfull.isEnabled) {
    screenfull.on('change', changeHandler);
  }
});

onUnmounted(() => {
  if (screenfull.isEnabled) {
    screenfull.off('change', changeHandler);
  }
});

// 切换全屏
const handleFullScreen = () => {
  if (!screenfull.isEnabled) {
    message.warning('您的浏览器不支持全屏功能');
    return;
  }

  screenfull.toggle().catch((err) => {
    console.error('全屏错误:', err);
    message.error('全屏操作失败');
  });
};
const username = ref('');

const getdata = async () => {
  const res = await reqUserInfo();
  if (res.code == 200) {
    username.value = res.data.username;
  }
};
const outlogin = () => {
  localStorage.removeItem('user-access-token');
  router.replace('/login');
};

const drawerVisible = ref(false);

const showDrawer = () => {
  drawerVisible.value = true;
};
</script>

<style lang="scss" scoped>
.outlogin {
  font-size: 16px;
  padding: 0 10px;
  cursor: pointer;
  transition: color 0.3s;
}
.fullscreen-btn {
  font-size: 22px;
  margin: 0 10px;
  color: var(--ant-text-color);

  &:hover {
    color: var(--ant-primary-color);
  }
}
</style>
